<template>
  <t-dialog
    v-model:visible="show"
    :width="900"
    :header="data.name"
    :footer="false"
    destroyOnClose
    :closeOnOverlayClick="false"
  >
    <template #body>
      <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onCount" style="overflow: hidden;">
        <t-row :gutter="20">
          <t-col :span="2">
            <t-form-item :label="plugin.t('count.count')" name="count">
              <t-input-number v-model="formData.count" theme="column" style="width: 100%" />
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item :label="plugin.t('count.content')" name="content">
              <t-input v-model="formData.content" />
            </t-form-item>
          </t-col>
          <t-col :span="2">
            <t-form-item label=" ">
              <t-button theme="primary" :loading="loading" @click="form.submit()">
                {{ $t('common.ok') }}
              </t-button>
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item label=" ">
              <div style="flex: 1">
                <t-button variant="outline" theme="primary" style="float: right"> {{ plugin.t('form.count') }} {{ data.count }} </t-button>
              </div>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
      <t-alert theme="info" :message="plugin.t('count.alert')" style="margin-top: 20px; " />
      <t-tabs :default-value="1" style="margin-top: 10px">
        <t-tab-panel :value="1" :label="plugin.t('outbound.tab')">
          <Outbound :id="data.id" />
        </t-tab-panel>
        <t-tab-panel :value="2" :label="plugin.t('inbound.tab')">
          <Inbound :id="data.id" />
        </t-tab-panel>
        <t-tab-panel :value="3" :label="plugin.t('supplier_order.title')">
          <SupplierOrder :id="data.id" />
        </t-tab-panel>
        <t-tab-panel :value="4" :label="plugin.t('count.title')">
          <Count />
        </t-tab-panel>
      </t-tabs>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import countStore from '../../store/count'
  import SupplierOrder from './supplier_order.vue'
  import Count from './count.vue'
  import Inbound from './inbound.vue'
  import Outbound from './outbound.vue'

  const plugin = index.plugin
  const show = ref(false)
  const data = ref({})

  const loading = ref(false)
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    count: [{ required: true, message: ' ', type: 'error' }],
    content: [{ required: true, message: ' ', type: 'error' }]
  }

  const open = row => {
    show.value = true
    data.value = row
    formData.value = {
      count: 0,
      content: ''
    }
    // 手动变更ID
    countStore.id(row.id)
  }

  const onCount = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      countStore.update(formData.value).then(res => {
        data.value.count += formData.value.count
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }
  
  defineExpose({ open })
</script>